<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>路灯</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        var createScene = function () {
            const scene = new BABYLON.Scene(engine);

            const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 50, 0));
            light.intensity = 0.5

            //添加一个聚光灯，稍后再创建一个网状灯柱和一个灯泡
            //然后将使该灯柱成为灯泡和灯光的父节点
            const lampLight = new BABYLON.SpotLight("lampLight", BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, -1, 0), Math.PI, 1, scene);
            lampLight.diffuse = BABYLON.Color3.Yellow();

            //挤压出形状
            const lampShape = [];
            for (let i = 0; i < 20; i++) {
                lampShape.push(
                    new BABYLON.Vector3(
                        Math.cos(i * Math.PI / 10),
                        Math.sin(i * Math.PI / 10),
                        0
                    )
                );
            }
            lampShape.push(lampShape[0]); //close shape

            //挤压路径
            const lampPath = [];
            lampPath.push(new BABYLON.Vector3(0, 0, 0));
            lampPath.push(new BABYLON.Vector3(0, 10, 0));
            for (let i = 0; i < 20; i++) {
                lampPath.push(
                    new BABYLON.Vector3(
                        1 + Math.cos(Math.PI - i * Math.PI / 40),
                        10 + Math.sin(Math.PI - i * Math.PI / 40),
                        0
                    )
                );
            }
            lampPath.push(new BABYLON.Vector3(3, 11, 0));


            //挤压灯柱
            const lamp = BABYLON.MeshBuilder.ExtrudeShape(
                "lamp",
                {
                    cap: BABYLON.Mesh.CAP_END,
                    shape: lampShape,
                    path: lampPath,
                    scale: 0.5
                });

            //添加灯泡
            const bulb = BABYLON.MeshBuilder.CreateSphere(
                "bulb",
                {
                    diameterX: 1.5,
                    diameterZ: 0.8
                });
            const yellowMat = new BABYLON.StandardMaterial("yellowMat");
            yellowMat.emissiveColor = BABYLON.Color3.Yellow();
            bulb.material = yellowMat;
            
            bulb.parent = lamp;
            bulb.position.x = 2;
            bulb.position.y = 10.5;

            lampLight.parent = bulb;

            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 50, height: 50 })

            return scene;
        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>